<template>
  <div>
    <div ref="main" style="width: 1200px; height: 600px; float: right;margin-top: 50px; ">

    </div>

    <el-form :model="formData" style=" float: left; margin-top: 80px;margin-left: 30px">

      <el-form-item label="选择班级:">
        <el-select class="full-width-input" v-model="formData.ClassId"  @change="selectClass"  clearable    placeholder="请选择班级分类" >
          <el-option  v-for="(item, index) in classData" :key="index" :label="item.label"
                      :value="item.value" ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择一级分类:">
        <el-select class="full-width-input" v-model="formData.OneId"  @change="select"  clearable    placeholder="请选择一级分类" >
          <el-option  v-for="(item, index) in interviewTypeOneData" :key="index" :label="item.label"
                      :value="item.value" ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择二级分类:" >
        <el-select class="full-width-input" v-model="formData.TwoId" @change="select1"  clearable    placeholder="请选择二级分类" >
          <el-option  v-for="(item, index) in interviewTypeTwoData" :key="index" :label="item.label"
                      :value="item.value" ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择三级分类:"  >
        <el-select class="full-width-input" v-model="formData.ThreeId"  @change="select2"  clearable    placeholder="请选择三级分类" >
          <el-option  v-for="(item, index) in interviewTypeThreeData" :key="index" :label="item.label"
                      :value="item.value" ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>


</template>

<script setup>

import {

  getInterviewTypeList,
} from '@/api/interviewType'

import {
  getClassList
} from '@/api/bW_class'


import {useUserStore} from "@/pinia/modules/user";

// 全量引入格式化工具 请按需保留
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'

//  按需引入 echarts
import * as echarts from "echarts";
import { Flag } from '@element-plus/icons-vue'
import {getTuData} from "@/api/capacity";

const formData = ref({
  // OneId: 0,
  // TwoId: 0,
  // ThreeId: 0,
  // ClassId: 0,
})

var myChart = {}
const userStore = useUserStore()

const userid= userStore.userInfo.ID
// console.log(userid)

const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value

onMounted(
    () => {

      init()
    }
)

let viewInfo = {}




const getTu = async() => {
  console.log(formData.value.OneId)
  if (formData.value.OneId == undefined || formData.value.OneId == 0){
    formData.value.OneId=1
    interviewTypeTwoData.value=[]
    await getInterviewTypeByOneData()
  }
  const table = await getTuData({level_one:formData.value.OneId,level_two:formData.value.TwoId,class_id:formData.value.ClassId,user_id:userid})
  console.log({level_one:formData.value.OneId,level_two:formData.value.TwoId,class_id:formData.value.ClassId,user_id:userid})
  option=table.data
  if (table.code === 0) {
    option =  table.data.Data
    myChart = echarts.init(main.value);
    myChart.setOption(option);
    console.log(table.data)
  }



  // myChart.setOption(option);
  // const table = await getTuData({level_one:1,class_id:1,user_id:userid})
}

var option = {
  title: {
    text: '能力图谱'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 650 },
      { name: 'Administration', max: 1600 },
      { name: 'Information Technology', max: 3000 },
      { name: 'Customer Support', max: 3800 },
      { name: 'Development', max: 5200 },
      { name: 'Marketing', max: 2500 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',

      data: [
        {
          value: [420, 300, 2000, 3500, 5000, 1800],
          name: 'Allocated Budget',
          label:{
            show: true
          }
        },
        {
          value: [500, 1400, 2800, 2600, 4200 ,2100],
          name: 'Actual Spending',
          label:{
            show: true
          }
        }
      ],
      axisLabel: {
        fontSize: 12, // 设置字体大小
        rotate: 60 // 设置旋转角度
      },
    }
  ]
};



const init = () => {
  getTu()
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(main.value);


  // 指定图表的配置项和数据

  setTimeout(()=>{
    if (viewInfo.Data != undefined){
      option = viewInfo.Data
    }

    myChart.setOption(option);
  },1000)
}

defineOptions({
  name: 'Capacity'
})

// 自动化生成的字典（可能为空）以及字段



// 验证规则
const rule = reactive({
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})




const interviewTypeOneData = ref([])
const interviewTypeTwoData = ref([])
const interviewTypeThreeData = ref([])
const classData = ref ([])


// const getTu = async() => {
//   const table = await getTuData({level_one:1,level_two:2,class_id:1})
//   if (table.code === 0) {
//
//     console.log(table.data)
//   }
// }
// getTu()


//获取班级信息
const getClassData = async() => {
  const table = await getClassList( {page: page.value, pageSize: pageSize.value})
  if (table.code === 0) {
    for (let i = 0; i < table.data.list.length; i++) {
      classData.value.push({
        "label": table.data.list[i].className,
        "value": table.data.list[i].classId,
      })
    }
    console.log(classData.value)
  }
}
// getClassData()

//获取一级分类
const getInterviewTypeList1 = async() => {
  // const table = await getInterviewTypeListNoPage({pid:0 })
  const table = await getInterviewTypeList({ page: 1, pageSize: 1000, ...{ pid:0} })
  if (table.code === 0) {
    for (let i = 0; i < table.data.list.length; i++) {
      interviewTypeOneData.value.push({
        "label": table.data.list[i].name,
        "value": table.data.list[i].ID,
      })
    }
  }
}
//根据一级分类获取二级分类
const getInterviewTypeByOneData = async() => {
  const table = await getInterviewTypeList({ page: 1, pageSize: 1000, ...{ pid:formData.value.OneId} })
  if (table.code === 0) {
    for (let i = 0; i < table.data.list.length; i++) {
      interviewTypeTwoData.value.push({
        "label": table.data.list[i].name,
        "value": table.data.list[i].ID,
      })
    }
    // console.log(interviewTwoTypeData.value)
  }
}

//根据二级分类获取三级分类
const getInterviewTypeByTwoData = async() => {
  const table = await getInterviewTypeList({ page: 1, pageSize: 1000, ...{ pid:formData.value.TwoId} })
  console.log({ page: 1, pageSize: 1000, ...{ pid:formData.value.TwoId} })
  if (table.code === 0) {
    for (let i = 0; i < table.data.list.length; i++) {
      interviewTypeThreeData.value.push({
        "label": table.data.list[i].name,
        "value": table.data.list[i].ID,
      })
    }
  }
}


//班级选择
const selectClass = async() => {
  classData.value=[]
  await getClassData()
  await getTu()
  console.log(formData.value)
}

//一级分类选择事件
const select = async() => {
  interviewTypeOneData.value=[]
  // await getInterviewTypeList1()
  await getInterviewTypeByOneData()
  await getTu()
  console.log(formData.value)
}

const select1 = async() => {
  interviewTypeThreeData.value= []
  await getInterviewTypeByTwoData()
  await getTu()
  console.log(formData.value)
}

const select2 = async() => {
  console.log(formData.value)
  await getTu()
  console.log(formData.value)
}



getInterviewTypeList1()
getClassData()

</script>

<style>

</style>
